<!--
  ~ Copyright (c) 2021 Simon Johnson <simon622 AT gmail DOT com>
  ~
  ~ Find me on GitHub:
  ~ https://github.com/simon622
  ~
  ~ Licensed to the Apache Software Foundation (ASF) under one
  ~ or more contributor license agreements.  See the NOTICE file
  ~ distributed with this work for additional information
  ~ regarding copyright ownership.  The ASF licenses this file
  ~ to you under the Apache License, Version 2.0 (the
  ~ "License"); you may not use this file except in compliance
  ~ with the License.  You may obtain a copy of the License at
  ~
  ~ http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing,
  ~ software distributed under the License is distributed on an
  ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
  ~ KIND, either express or implied.  See the License for the
  ~ specific language governing permissions and limitations
  ~ under the License.
  -->

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
    <script src="/console/js/autocomplete.js"></script>
    <title>Example</title>
</head>
<body>
<div class="container pt-4 pb-4">
    <div class="h-100 d-flex flex-column bd-highlight">
        <div class="input-group">
            <input type="text" class="form-control" id="input" placeholder="Start typing..." autocomplete="off">
        </div>
    </div>
</div>
<script>
    const field = document.getElementById('input');
    const ac = new Autocomplete(field, {
        data: [{label: "I'm a label", value: 42}],
        maximumItems: 10,
        threshold: 2,
        onSelectItem: ({label, value}) => {
            alert("simon");
        },
        onInput: (value) => {
            console.log("user input: ", value);
            $.getJSON("/console/search?searchTerm=" + value, function (update){
                console.log("recieved: ", value);
                ac.setData(update);
                ac.renderIfNeeded();
            });
            // ac.setData([{
            //     "label": "SIMON",
            //     "value": "FIT"
            // }]);
        }
    });
</script>
</body>
</html>